<template>
  <div id="transferTree">
    <el-dialog
      :title="`选择${dialogTempName}`"
      :visible="visible"
      width="60%"
      center
      :modal="showTransferModal"
      @update:visible="hide"
    >
      <template>
        <el-row :gutter="24">
          <el-form
            ref="searchData"
            :inline="true"
            size="small"
            :model="searchData"
            class="formPanel"
            label-width="100px"
          >
            <el-form-item :label="`${dialogTempName}名称`" prop="name">
              <el-input
                v-model="searchData.queryName"
                placeholder="请输入名称"
                clearable
                @keyup.enter.native="searchList"
              />
            </el-form-item>
            <el-form-item :label="`${dialogTempName}代码`" prop="code">
              <el-input
                v-model="searchData.queryCode"
                placeholder="请输入代码"
                clearable
                @keyup.enter.native="searchList"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchList">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetParams()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="all">
              <el-transfer
                v-model="localTransferValue"
                v-loading="loading"
                :data="transferData"
                :titles="transferTitles"
                class="transferClass"
                filterable
                @change="handleTransferChange"
              ></el-transfer>
              <div id="transfer_btn" class="el-transfer__buttons">
                <button
                  :disabled="selectDatas.length == 0"
                  type="button"
                  class="el-button el-button--primary el-button--small el-transfer__button"
                  :class="[selectDatas.length == 0 ? 'is-disabled' : '']"
                  @click="leftData"
                >
                  <span>
                    <i class="el-icon-arrow-left"></i>
                    <!---->
                  </span>
                </button>
              </div>
              <div class="el-transfer-panel transferAll">
                <p class="el-transfer-panel__header">
                  <label class="el-checkbox">
                    <span class="el-checkbox__input" :class="checkClassObj">
                      <span class="el-checkbox__inner"></span>
                      <input
                        v-model="ischeckAll"
                        type="checkbox"
                        aria-hidden="false"
                        class="el-checkbox__original"
                      />
                    </span>
                    <span class="el-checkbox__label">
                      {{ transferTitles[1] }}
                      <span
                        >{{ selectDatas.length }}/{{
                          filteredData.length
                        }}</span
                      >
                      <!---->
                    </span>
                  </label>
                </p>
                <div class="el-transfer-panel__body">
                  <el-input
                    v-model="query"
                    class="el-transfer-panel__filter"
                    size="small"
                    @mouseenter.native="inputHover = true"
                    @mouseleave.native="inputHover = false"
                  >
                    <i
                      slot="prefix"
                      :class="['el-input__icon', 'el-icon-' + inputIcon]"
                      @click="clearQuery"
                    ></i>
                  </el-input>
                  <div
                    role="group"
                    aria-label="checkbox-group"
                    class="el-checkbox-group el-transfer-panel__list is-filterable"
                    style
                  >
                    <label
                      v-for="code in filteredData"
                      :key="code"
                      class="el-checkbox el-transfer-panel__item"
                    >
                      <input
                        v-model="selectDatas"
                        type="checkbox"
                        :value="code"
                      />
                      <span>{{ transferRightValueObj[code] }}</span>
                    </label>
                  </div>
                  <p
                    v-show="
                      filteredData.length == 0 && localTransferValue.length > 0
                    "
                    class="transfer_empty el-transfer-panel__empty"
                  >
                    无匹配数据
                  </p>
                  <p
                    v-show="
                      localTransferValue.length == 0 && filteredData.length == 0
                    "
                    class="transfer_empty el-transfer-panel__empty"
                  >
                    无数据
                  </p>
                </div>
              </div>
            </div>
            <!-- 分页 -->
          </el-col>
          <el-col :span="24">
            <global-pagination
              v-show="searchData.total > 0"
              :total="searchData.total"
              :page.sync="searchData.pageNum"
              :limit.sync="searchData.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              @pagination="updatePage"
            />
          </el-col>
        </el-row>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "GlobalTransferDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    transferCode: {
      type: String,
      default: "",
    },
    searchType: {
      type: String,
      default: "cdp",
    },
    showTransferModal: {
      // @param showTransferModal 是否显示遮罩，默认显示
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    transferRightValueObj: {
      // 穿梭框右侧 通过key显示value
      type: Object,
      default: () => {},
    },
    transferValue: {
      // 穿梭框所有选中项的集合,code的集合
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      dialogTempName: "", // 弹框名称
      searchData: {
        code: this.transferCode,
        queryCode: "",
        queryName: "",
        pageSize: 10,
        type: this.searchType,
        pageNum: 1,
        total: 0,
      },
      query: "",
      inputHover: false,
      // 穿梭框右侧 选中的集合
      selectDatas: [],
      // 穿梭框集合
      transferData: [],
    };
  },
  computed: {
    localTransferValue: {
      get() {
        return this.transferValue;
      },
      set(value) {
        this.$emit("update:transferValue", value);
      },
    },
    filteredData() {
      return this.localTransferValue.filter((item) => {
        if (this.query) {
          return item.match(this.query);
        } else {
          return item;
        }
      });
    },
    checkClassObj: function () {
      if (
        this.filteredData.length === this.selectDatas.length &&
        this.selectDatas.length > 0
      ) {
        return "is-checked";
      } else if (
        this.filteredData.length > this.selectDatas.length &&
        this.selectDatas.length > 0
      ) {
        return "is-indeterminate";
      }
      return "";
    },
    inputIcon() {
      return this.query.length > 0 && this.inputHover
        ? "circle-close"
        : "search";
    },
    ischeckAll: {
      get() {
        return (
          this.filteredData.length === this.selectDatas.length &&
          this.selectDatas.length > 0
        );
      },
      set(newValue) {
        this.selectDatas = newValue ? this.filteredData : [];
      },
    },
    transferTitles() {
      const { dialogTempName } = this;
      const leftTitle = `全部${dialogTempName}`;
      const rightTitle = `选中${dialogTempName}`;
      return [leftTitle, rightTitle];
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.initData();
      }
    },
  },
  methods: {
    hide() {
      this.$emit("update:visible", false);
    },
    generateData(arr) {
      const data = [];
      for (let i = 0; i < arr.length; i++) {
        data.push({
          key: `${arr[i].code}`,
          label: `${arr[i].name}`,
        });
      }
      return data;
    },
    clearQuery() {
      if (this.inputIcon === "circle-close") {
        this.query = "";
      }
    },
    // 穿梭框左移
    leftData() {
      this.localTransferValue = this.transferValue.filter((item) => {
        if (!this.selectDatas.includes(item)) {
          return item;
        }
      });
      this.selectDatas = [];
    },
    /**
     * pageSize 变更
     */
    updatePage({ page, limit }) {
      this.searchData.pageNum = page;
      this.searchData.pageSize = limit;
      this.getList();
    },
    // 查询
    searchList() {
      this.searchData.pageNum = 1;
      this.searchData.pageSize = 10;
      this.getList();
    },
    // 重置
    resetParams() {
      this.$refs.searchData.resetFields();
      this.searchList();
    },
    handleConfirm() {
      const {
        localTransferValue,
        transferRightValueObj,
        transferCode: type,
      } = this;
      if (!this.multiple && localTransferValue.length > 1) {
        this.$message.error("不支持多选");
        return;
      }
      const paramsArr = localTransferValue.map((code) => {
        return {
          code,
          name: transferRightValueObj[code],
        };
      });
      const params = {
        code: paramsArr.map(({ code }) => code).join(","),
        name: paramsArr.map(({ name }) => name).join(","),
        type,
        transferRightValueObj,
      };
      switch (this.searchType) {
        case "search":
          this.$emit("transferInfo", params);
          break;
        default:
          this.$emit("goodsInfo", { paramsArr, transferRightValueObj });
          break;
      }
      this.hide();
    },
    handleTransferChange(value) {
      this.localTransferValue = value;
    },
    async getList() {
      // let res = {};
      this.loading = true;
      // const { transferCode, searchData, $httpCode } = this;
      // try {
      //   switch (transferCode) {
      //     default:
      //       res = await getValuesPageList({ ...searchData });
      //   }
      // } catch {
      //   this.loading = false;
      // }
      // const { code, data } = res;
      // if (code === $httpCode.ok) {
      //   this.loading = false;
      //   const {
      //     name,
      //     pageInfo: { list, pageNum, pageSize, total },
      //   } = data;
      //   this.dialogTempName = name;
      //   this.transferData = this.generateData(list);
      //   searchData.pageNum = pageNum;
      //   searchData.pageSize = pageSize;
      //   searchData.total = total;
      //   const transferRightValueObj = {};
      //   list.forEach(({ code, name }) => {
      //     this.$set(transferRightValueObj, code, name);
      //   });
      //   this.$emit("update:transferRightValueObj", {
      //     ...this.transferRightValueObj,
      //     ...transferRightValueObj,
      //   });
      // }
    },
    initData() {
      this.selectDatas = [];
      const { transferCode: code, searchType } = this;
      this.searchData = {
        code,
        queryCode: "",
        queryName: "",
        pageSize: 10,
        type: searchType,
        pageNum: 1,
        total: 0,
      };
      this.getList();
    },
  },
};
</script>
<style></style>
<style scoped lang="scss">
#transferTree .transferAll {
  display: block !important;
  position: absolute;
  top: 0;
  width: 40%;
  right: 0.111rem;
}
#transferTree #transfer_btn .el-button {
  position: absolute;
  bottom: 20%;
}
.transferBtn {
  position: absolute;
  top: 8rem;
  left: 18rem;
}
#transferTree .el-transfer__buttons .el-button {
  display: none;
}
#transferTree .el-transfer__buttons .el-button:last-child {
  display: block;
  position: absolute;
  margin: 0;
  bottom: 45%;
}
#transferTree .el-transfer__buttons {
  display: flex;
  justify-content: center;
}

#transferTree .transfer_empty {
  position: absolute;
  top: 100px;
  width: 100%;
}
#shopTree {
  height: 400px;
  overflow-y: scroll;
}
.el-transfer-panel__item {
  display: flex !important;
  align-items: center;
  span {
    padding-left: 12px;
  }
}
::v-deep {
  #transferTree .el-transfer {
    display: block;
  }
  .el-transfer-panel {
    display: none !important;
    width: 40%;
  }
  .transferClass .el-transfer-panel:first-child {
    display: inline-block !important;
  }
  .el-transfer__buttons > :first-child {
    display: none;
  }
  .all {
    position: relative;
  }
  .el-transfer-panel__body {
    height: 320px;
    overflow: auto;
  }
  .el-transfer-panel__list.is-filterable {
    height: 290px;
  }
  .el-dialog__body {
    padding-bottom: 0;
  }
  .el-transfer-panel__filter {
    width: auto;
  }
}
</style>
